<template>
  <el-dialog title="创建角色" :visible.sync="visible" @close="onClose">
    <el-form :model="formData" ref="form">

      <el-form-item label="角色名称" :label-width="formLabelWidth" required>
        <el-input v-model="formData.roleName" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="角色权限字符串" :label-width="formLabelWidth" required>
        <el-input v-model="formData.roleKey" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="显示顺序" :label-width="formLabelWidth" required>
        <el-input v-model="formData.roleSort" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="数据范围" :label-width="formLabelWidth" >
        <el-input v-model="formData.dataScope" autocomplete="off"></el-input>
      </el-form-item>

<!--      <el-form-item label="菜单树选择项是否关联显示" :label-width="formLabelWidth" >-->
<!--        <el-input v-model="formData.menuCheckStrictly" autocomplete="off"></el-input>-->
<!--      </el-form-item>-->

<!--      <el-form-item label="部门树选择项是否关联显示" :label-width="formLabelWidth" >-->
<!--        <el-input v-model="formData.deptCheckStrictly" autocomplete="off"></el-input>-->
<!--      </el-form-item>-->

<!--      <el-form-item label="角色状态" :label-width="formLabelWidth" required>-->
<!--        <el-input v-model="formData.status" autocomplete="off"></el-input>-->
<!--      </el-form-item>-->

<!--      <el-form-item label="删除标志" :label-width="formLabelWidth" >-->
<!--        <el-input v-model="formData.delFlag" autocomplete="off"></el-input>-->
<!--      </el-form-item>-->





      <el-form-item label="备注" :label-width="formLabelWidth" >
        <el-input v-model="formData.remark" autocomplete="off"></el-input>
      </el-form-item>

<!--      <el-form-item label="property_blacklist" :label-width="formLabelWidth" >-->
<!--        <el-input v-model="formData.propertyBlacklist" autocomplete="off"></el-input>-->
<!--      </el-form-item>-->

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="onClose">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {createSysRole} from "@/api/sys/role";
export default {
  name: 'SysRoleCreate',
  props: {
    visible: false, 
  },
  data() {
    return {
      formData: {
        roleId: '',

        roleName: '',

        roleKey: '',

        roleSort: '',

        dataScope: '',

        menuCheckStrictly: '',

        deptCheckStrictly: '',

        status: '0',

        delFlag: '0',

        createBy: '',

        createTime: '',

        updateBy: '',

        updateTime: '',

        remark: '',

        propertyBlacklist: '',

      },
      formLabelWidth: '120px'
    };
  },
  methods: {
    onClose() {
      this.$emit('update:visible', false)
    },
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 执行表单提交操作
          // this.formData 包含了通过校验的表单数据
          createSysRole(this.formData).then(res => {
            console.log('createSysRole - success');
            this.$emit('submit-success');
            this.onClose();
          });
        } else {
          console.log('Form validation failed');
        }
      });
    }
  }
}
</script>

<style scoped>
</style>
